<template>
    <div>
        <div @click="play">
            播放·
        </div>
        <video ref="remoteVideo" crossorigin="anonymous" webkit-playsinline playsinline x5-playsinline
               x-webkit-airplay="allow" autoplay controls
               style="width: 100%; height: 440px; background: black;"></video>
    </div>
</template>
<script>
import {axiosInstance} from "@/static/common";

export default {
    name: 'webrtc',
    methods: {
        async play() {

            try {
                const response = await axiosInstance({
                    method: 'post',
                    url: '/resHttp',
                });

                const [tun = {}] = response.data.data.syscontrol || []
                const server = tun.ice_server
                const iceServers = [
                    {urls: server.stun_url},
                    {
                        urls: server.turn_url,
                        username: server.username,
                        credential: server.password
                    }
                ];

                const pc = new RTCPeerConnection({
                    iceServers,
                    iceTransportPolicy: 'all',
                    bundlePolicy: 'balanced',
                    rtcpMuxPolicy: 'require',
                    iceCandidatePoolSize: 0
                });

                pc.oniceconnectionstatechange = function (event) {
                    console.log('ICE connection state changed to:', pc.iceConnectionState);
                };

                pc.onconnectionstatechange = function (event) {
                    console.log('Connection state changed to:', pc.connectionState);
                };

                pc.onsignalingstatechange = function (event) {
                    console.log('Signaling state changed to:', pc.signalingState);
                };

                pc.ontrack = (event) => {
                    const [remoteStream] = event.streams;
                    const remoteVideoElement = this.$refs.remoteVideo.$refs.video;
                    remoteVideoElement.srcObject = remoteStream;
                };

                const offer = await pc.createOffer({
                    offerToReceiveVideo: 1,
                    offerToReceiveAudio: 1,
                    voiceActivityDetection: true,
                    iceRestart: false
                });

                // 设置本地描述
                await pc.setLocalDescription(offer);

                // 发送 SDP 到服务器，获取远端的 SDP
                const sdpResponse = await axiosInstance({
                    method: 'post',
                    url: '/resHttp2',
                    params: {
                        streamPath: 'hlsram/live0',
                        from: '',
                    },
                    data: pc.localDescription
                });
				
				

                // 将远端 SDP 设置为远程描述
                const remoteDescription = new RTCSessionDescription({
                    type: 'answer',
                    sdp: sdpResponse.data.sdp
                });
                await pc.setRemoteDescription(remoteDescription);

            } catch (error) {
                console.error('Error during playback:', error);
            }
        }
    }
}
</script>
<style scoped lang="scss">

</style>